<template>
  <view>
    <uni-card :is-shadow="false" is-full>
      <uni-title
        type="h1"
        title="按更新日期倒序排列,到期记录不可查询,三个月内到期的车辆标黄色"
        align="center"
        color="#027fff"
      ></uni-title>
    </uni-card>
    <uni-section title="">
      <uni-search-bar
        radius="100"
        placeholder="请输入车牌号"
        @confirm="handleSearch"
        :focus="true"
        clearButton="auto"
        cancelButton="auto"
        v-model="searchValue"
      >
      </uni-search-bar>

      <!-- <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">免费时间</uni-th>
					<uni-th align="center">车辆类型</uni-th>
					<uni-th align="center">车牌</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in list" :key="index">
					<uni-td align="center">{{ item.freeTimeStart }}至{{ item.freeTimeEnd }}</uni-td>
					<uni-td align="center">{{ item.vehicleType }}</uni-td>
					<uni-td align="center">{{ item.licensePlate }}</uni-td>
				</uni-tr>
			</uni-table> -->

      <uni-list v-for="(item, index) in list" :key="index" class="item">
        <!-- <uni-list-item title="开启点击反馈" clickable @click="onClick"></uni-list-item>
				<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item>
				<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index"
					@click="onClick($event,1)"></uni-list-item> -->
        <uni-list-item title="" direction="column">
          <!-- 自定义 header -->
          <template v-slot:header>
            <text class="label">车牌号码：{{ item.licensePlate }}</text>
          </template>
          <template v-slot:header v-if="item.willDid">
            <text class="label" style="background-color: yellow"
              >车牌号码：{{ item.licensePlate }}</text
            >
          </template>
          <!-- 自定义 body -->
          <template v-slot:body>
            <text class="label">车辆类型：{{ item.vehicleType }}</text>
            <text class="label">免费区间：{{ item.freeSection }}</text>
            <text class="label">
              免费时间：{{ item.freeTimeStart }} - {{ item.freeTimeEnd }}</text
            >
          </template>
          <template v-slot:body v-if="item.willDid">
            <text class="label" style="background-color: yellow"
              >车辆类型：{{ item.vehicleType }}</text
            >
            <text class="label" style="background-color: yellow"
              >免费区间：{{ item.freeSection }}</text
            >
            <text class="label" style="background-color: yellow">
              免费时间：{{ item.freeTimeStart }} - {{ item.freeTimeEnd }}</text
            >
          </template>
          <!-- 自定义 footer-->
          <template v-slot:footer>
            <text class="label">施工单位：{{ item.constructionUnit }}</text>
            <text class="label">下发时间：{{ item.updatedDate }}</text>
          </template>
          <template v-slot:footer v-if="item.willDid">
            <text class="label" style="background-color: yellow"
              >施工单位：{{ item.constructionUnit }}</text
            >
            <text class="label" style="background-color: yellow"
              >下发时间：{{ item.updatedDate }}</text
            >
          </template>
        </uni-list-item>
      </uni-list>

      <!-- 	<view class="list">
				<view v-for="(item, index) in list" :key="index" class="item">
					<view>
						<text class="label">施工单位：</text>{{ item.constructionUnit }}
					</view>
					<view>
						<text class="label">车牌号码：</text>{{ item.licensePlate }}
					</view>
					<view>
						<text class="label">免费区间：</text>{{ item.freeSection }}
					</view>
					<view>
						<text class="label">免费时间：</text>{{ item.freeTimeStart }} -
						{{ item.freeTimeEnd }}
					</view>
					<view>
						<text class="label">下发时间：</text>{{ item.updatedDate }}
					</view>
					<view>
						<text class="label">车辆类型：</text>{{ item.vehicleType }}
					</view>
				</view>
			</view> -->
    </uni-section>

    <uni-fab
      :pattern="pattern"
      :content="content"
      :horizontal="horizontal"
      :vertical="vertical"
      :direction="direction"
      @trigger="trigger"
    ></uni-fab>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
// import { fetchFreeCar } from "./constant";

const horizontal = ref("right");
const vertical = ref("bottom");
const direction = ref("horizontal");
const pattern = ref({
  icon: "cloud-download",
  color: "#7A7E83",
  backgroundColor: "#fff",
  selectedColor: "#007AFF",
  buttonColor: "darkorange",
  iconColor: "#fff",
});
const content = ref([
  {
    iconPath: "/static/nav-car-icon.png",
    selectedIconPath: "/static/nav-car-active-icon.png",
    text: "更新免费",
    active: false,
  },
  {
    iconPath: "/static/nav-error-car-icon.png",
    selectedIconPath: "/static/nav-error-car--active-icon.png",
    text: "清除数据",
    active: false,
  },
]);
const list = ref([]);
const searchValue = ref("");
const Host = import.meta.env.VITE_HOST;
const storageKey = "freeCarList";

onLoad(() => {
  setTimeout(function () {
    console.log("start pulldown");
  }, 1000);
  uni.startPullDownRefresh();
  uni.getStorage({
    key: storageKey,
    success: (res) => {
      list.value = JSON.parse(res.data);
    },
  });
});

// onPullDownRefresh(() => {
// 	console.log('refresh');
// 	setTimeout(function() {
// 		uni.stopPullDownRefresh();
// 	}, 1000);
// });
const trigger = (e) => {
  console.log(e);
  content.value[e.index].active = !content.value[e.index].active;
  if (e.index === 0) {
    // 更新免费车;

    uni.request({
      url: Host + "/api/freeCar",
      success: (res) => {
        console.log(res.data);
        const freeCarList = res.data.data;
        if (freeCarList) {
          uni.setStorage({
            key: storageKey,
            data: JSON.stringify(freeCarList),
            success: () => {
              console.log("setStorage success");
            },
            fail: () => {
              console.log("setStorage fail");
            },
          });
          list.value = freeCarList;
        }
      },
      fail: () => {
        console.log("request fail");
      },
    });
    content.value[e.index].active = false;
    uni.showToast({
      title: "更新成功",
      icon: "none",
    });
  } else if (e.index === 1) {
    console.log("removeStorage");
    uni.removeStorage({
      key: storageKey,
    });
    list.value = [];
    content.value[e.index].active = false;
    uni.showToast({
      title: "清除成功",
      icon: "none",
    });
  }
};

const handleSearch = (res) => {
  uni.showToast({
    title: "搜索：" + res.value,
    icon: "none",
  });
  const searchValueLocal = res.value;
 // 倒排索引
const invertedIndex = {};

// 构建倒排索引
list.value.forEach(item => {
  const licensePlate = item.licensePlate.toLowerCase();
  for (let i = 0; i < licensePlate.length; i++) {
    for (let j = i + 1; j <= licensePlate.length; j++) {
      const subStr = licensePlate.substring(i, j);
      if (!invertedIndex[subStr]) {
        invertedIndex[subStr] = [];
      }
      invertedIndex[subStr].push(item);
    }
  }
});

// 进行模糊搜索
const searchValueLower = searchValueLocal.toLowerCase();
const matchingItems = [];

Object.keys(invertedIndex).forEach(key => {
  if (key.includes(searchValueLower)) {
    matchingItems.push(...invertedIndex[key]);
  }
});

// 去重
const uniqueMatchingItems = Array.from(new Set(matchingItems));

list.value = uniqueMatchingItems;
};
</script>

<style></style>
